<template>
	<view class="container">
		<!-- 会员卡 -->
		<UniUserUnion :userInfo="userInfo"></UniUserUnion>

		<!-- 会员卡下拉 -->
		<view class="cover-container" :style="[{
						transform: coverTransform,
						transition: coverTransition
					}]"
		 @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			<!-- 覆盖在会员卡上的组件 -->
			<UniUserCover :userInfo="userInfo"></UniUserCover>

			<!-- 订单 -->
			<UniUserOrder :navTo="navTo" :userInfo="userInfo"></UniUserOrder>

			<!-- 浏览历史 -->
			<UniUserHistory :navTo="navTo" :userInfo="userInfo"></UniUserHistory>

		</view>

		<!-- #ifdef H5 -->
		<keep-alive>
			<uni-footer></uni-footer>
		</keep-alive>
		<!-- #endif -->
		<!-- #ifndef MP -->
		<keep-alive>
			<uni-overlay></uni-overlay>
		</keep-alive>
		<!-- #endif -->
	</view>
</template>
<script>
	import UniUserUnion from '@/components/user/uni-user-union.vue';
	import UniUserCover from '@/components/user/uni-user-cover.vue';
	import UniUserOrder from '@/components/user/uni-user-order.vue';
	import UniUserHistory from '@/components/user/uni-user-history.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let startY = 0;
	let moveY = 0;
	let pageAtTop = true;
	export default {
		components: {
			UniUserUnion,
			UniUserCover,
			UniUserOrder,
			UniUserHistory
		},
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false
			}
		},
		onLoad() {},

		computed: {
			...mapState(['hasLogin', 'userInfo', 'slider'])
		},
		methods: {
			/**
			 * Vuex
			 */
			...mapMutations(['changeSlider']),
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}

			/**
			 * @param {Object} e
			 * 标题图标事件
			 */
			// #ifndef MP
			,
			onNavigationBarButtonTap(e) {
				this.changeSlider()
			}
			// #endif

		}
	}
</script>
<style lang='scss'>
	/* scss变量 	
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	} 
	继承
	@extend %flex-center;
	*/

	/* #ifdef H5 */
	.container {
		padding-bottom: 120upx;
	}

	/* #endif */

	.cover-container {
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 30upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
	}
</style>
